<template>
    <div class="container">
        <h3>仓库管理</h3>
        <el-row style="margin-top:15px">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model.trim="searchName1">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch1">搜索</el-button>
                </el-input>
            </el-col>
            <router-link to="/inventory/addInventory"><el-button type="primary" style="float:right; margin-right: 10px">新增仓库</el-button></router-link>
        </el-row>
        <el-row>
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
            <el-table-column prop="name" sortable label="仓库名称"></el-table-column>
            <el-table-column prop="address" sortable label="仓库地址"></el-table-column>
            <el-table-column prop="type" sortable label="状态"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handleView1(scope.$index, scope.row)"
                    >查看</el-button>
                    <el-button type="text">
                        <el-dropdown style="color: #409EFF; font-size:12px">
                            <span class="el-dropdown-link">
                                更多
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button
                                        type="text"
                                        @click="handleEdit1(scope.$index, scope.row)"
                                        style="color: #666"
                                    >编辑</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button
                                        type="text"
                                        v-if="scope.row.type=='启用'"
                                        @click="handleDisable1(scope.$index, scope.row)"
                                        style="color: #666"
                                    >禁用</el-button>
                                    <el-button
                                        type="text"
                                        v-if="scope.row.type=='禁用'"
                                        @click="handleDisable1(scope.$index, scope.row)"
                                        style="color: #666"
                                    >启用</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button
                                        type="text"
                                        @click="handleDelete1(scope.$index, scope.row)"
                                        style="color: #ff0000"
                                    >删除</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-button>
                </template>
            </el-table-column>
        <el-pagination layout="prev, pager, next" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
        </el-table>
        </el-row>
        <div class="footerFixed">
            <el-button @click="backPage">返回</el-button>
        </div>
    </div>
</template>

<script>
import {warehouse_findByList,warehouse_isStart,warehouse_deleteById} from "@/request/api";
import { mapState } from 'vuex';
    export default {
        data() {
            return {
                type: '启用',
                searchName1: '',
                tableData: [
                    {
                        id: '111',
                        boxCode: '11'
                    }
                ],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
            };
        },
        computed:{
            ...mapState(['switchHeadTab'])
        },
        mounted(){
            this.init()
            // console.log(this.$store.state.newStorge)
        },
        methods: {
            backPage () {
                this.$router.go(-1);
            },
            // 调用接口
            init(){
                warehouse_findByList({
                    searchName: this.searchName1,
                    page: this.currentPage1,
                    wareHouseType:this.switchHeadTab == "生产系统" ? "1":"2"
                }).then((res) => {
                    this.tableData = res.rows
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].type = this.tableData[i].type ==0?'启用':'禁用'
                    }
                })
            },
            // 查看
            handleView1(index,row){
                this.$router.push({
                    path: '/inventory/viewInventory',
                    query: { id: row.id }
                });
            },
            //编辑
            handleEdit1(index,row){
                this.$router.push({
                    path: '/inventory/editInventory',
                    query: { id: row.id }
                });
            },
            // 禁用
            handleDisable1(index,row){
                if (row.type == '启用') {
                    this.$confirm('此操作将禁用该条数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        warehouse_isStart({
                            id: row.id,
                            type: 1
                        }).then((res) =>{
                            this.$notify({
                                title: '操作成功',
                                message: '禁用成功',
                                type: 'success'
                            });
                            this.init();
                        });
                    })
                } else {
                    this.$confirm('此操作将启用该条数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        warehouse_isStart({
                            id: row.id,
                            type: 0
                        }).then((res) =>{
                            this.$notify({
                                title: '操作成功',
                                message: '启用成功',
                                type: 'success'
                            });
                            this.init();
                        });
                    });
                }
            },
            //删除
            handleDelete1(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    warehouse_deleteById(row.id).then((res) =>{
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        this.init()
                    })
                });
            },
            // 搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init()
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init()
            },
        }
    }
</script>

<style scoped>
.el-row{ margin-bottom: 20px;}
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom: 0;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
.footerFixed{
    bottom: 2px;
}
</style>
